<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
</head>

<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>

  <%@ include file="/WEB-INF/include/menu.jsp"%>

  <div class="container main-content report">

    <div class="panel panel-default x-panel x-panel-layout">

      <div class="panel-heading">
        <ol class="breadcrumb">
          <li><a href="${ctx.host}/report">报表</a></li>
          <li class="active">报表</li>
        </ol>
      </div>

      <div class="panel-body">

        <div class="col-xs-2 x-panel-layout-left no-horizontal-padding">
          <%@ include file="/WEB-INF/include/submenu.jsp"%>
        </div>

        <div class="col-xs-10 x-panel-layout-right">

          <div class="x-breadcrumb-wrapper">
            <div class="x-breadcrumb clearfix">
              <h2><i class="glyphicon glyphicon-fire"></i>&nbsp;&nbsp;<span>报表&nbsp;-&nbsp;一元尝鲜统计报表</span></h2>
            </div>
          </div>
          
          <div class="x-breadcrumb-wrapper top-margin-20" style="position: relative;">
            <ul class="nav nav-pills x-breadcrumb-nav">
              <li class="pull-left ${(empty param.period or param.period eq 'hour') ? 'active' : ''}"><a href="${ctx.host}/taste-stat-reports?day=${param.day}&period=hour&source=${selectedSource}">每小时</a></li>
              <li class="pull-left ${param.period eq 'day' ? 'active' : ''}"><a href="${ctx.host}/taste-stat-reports?day=${param.day}&period=day&source=${selectedSource}">每天</a></li>
              <div class="pull-right" style="margin-left:15px;">
                <select name="source">
                  <option value="">全部来源</option>
                  <c:forEach var="source" items="${sources}">
                    <option value="${source}" ${source == selectedSource ? 'selected' : ''}>${source}</option>
                  </c:forEach>
                </select>
              </div>
              <div class="pull-right" style="margin-left:15px;">
                <input type="text" class="form-control date" name="day" value="${empty param.day ? today : param.day}" data-validate = "required" placeholder="请选择日期" readOnly/>
              </div>
              <a href="${ctx.host}/taste-stat-reports/export-view" data-target="#report-export" data-toggle="modal" class="btn btn-default x-btn btn-shadow btn-shadow-default pull-right">导出</a>
            </ul>
          </div>
          
          <div class="tab-content">
            <c:choose>
              <c:when test="${empty param.period or param.period eq 'hour'}">
                <div class="tab-pane fade active in"style="min-height: 100px;">
                  
                  <h2 class="title">
                    <i class="glyphicon glyphicon-triangle-right" style="color: #FF8100;" title=""></i>&nbsp;&nbsp;<span>关键指标</span>
                  </h2>
               
                  <div style="margin: 0 15px;">
                    <div class="x-breadcrumb-content row key-data">
                      <div class="col-xs-4">
                        <h1>${questionNum}</h1>
                        <p>完成问卷数</p>
                      </div>
                      <div class="col-xs-4">
                        <h1>${profileNum}</h1>
                        <p>填写个人信息数</p>
                      </div>
                      <div class="col-xs-4">
                        <h1>${orderNum}</h1>
                        <p>下单量</p>
                      </div>
                    </div>
                  </div>
                  
                  <h2 class="title">
                    <i class="glyphicon glyphicon-triangle-right" style="color: #FF8100;" title=""></i>&nbsp;&nbsp;<span>${empty selectedSource ? '全部来源' : selectedSource}</span>
                  </h2>
    
                  <div style="margin: 0 15px;">
                    <table class="table table-striped table-hover x-table" style="margin-bottom:20px;">
                        <thead>
                          <tr>
                            <th>小时</th>
                            <th>完成问卷数</th>
                            <th>填写个人信息数</th>
                            <th>下单量</th>
                          </tr>
                        </thead>
                        <tbody>
                          <c:forEach var="hour" begin="0" end="${maxHour}" step="1">
                            <c:set var="hourStr" value="${hour}${''}"></c:set>
                            <tr>
                              <td>${hour}:00-${hour}:59</td>
                              <c:choose>
                                <c:when test="${empty selectedSource}">
                                  <td ${questionList[hourStr].num > 0 ? 'style="color: red;"' : '' }>${empty questionList[hourStr] ? 0 : questionList[hourStr].num}</td>
                                  <td ${profileList[hourStr].num > 0 ? 'style="color: red;"' : '' }>${empty profileList[hourStr] ? 0 : profileList[hourStr].num}</td>
                                  <td ${orderList[hourStr].num > 0 ? 'style="color: red;"' : '' }>${empty orderList[hourStr] ? 0 : orderList[hourStr].num}</td>
                                </c:when>
                                <c:otherwise>
                                  <c:choose>
                                    <c:when test="${empty tasteStatList[hourStr]}">
                                      <td>0</td>
                                      <td>0</td>
                                      <td>0</td>
                                    </c:when>
                                    <c:otherwise>
                                      <td ${tasteStatList[hourStr].questionNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[hourStr].questionNum}</td>
                                      <td ${tasteStatList[hourStr].profileNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[hourStr].profileNum}</td>
                                      <td ${tasteStatList[hourStr].orderNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[hourStr].orderNum}</td>
                                    </c:otherwise>
                                  </c:choose>
                                </c:otherwise>
                              </c:choose>
                              
                            </tr>
                          </c:forEach>
                        </tbody>
                      </table>
                  </div>
                  
                  <h2 class="title clearfix">
                    <i class="glyphicon glyphicon-triangle-right" style="color: #FF8100;" title=""></i>&nbsp;&nbsp;<span>个人信息</span>
                  </h2>
                  
                  <div style="margin: 0 15px;">
                    <table class="table table-striped table-hover x-table" style="margin-bottom:20px;">
                        <thead>
                          <tr>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>微信号</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>身高(cm)</th>
                            <th>体重(kg)</th>
                            <th>填写时间</th>
                            <th>來源</th>
                            <th>买单</th>
                            <th>客服微信</th>
                          </tr>
                        </thead>
                        <tbody>
                          <c:forEach var="profile" items="${profiles}">
                            <tr>
                              <td>${profile.name}</td>
                              <td>${profile.mobile}</td>
                              <td>${profile.wechat}</td>
                              <td>${profile.gender.description}</td>
                              <td>${profile.age}</td>
                              <td>${profile.height}</td>
                              <td>${profile.weight}</td>
                              <td>${profile.createTime}</td>
                              <td>${profile.source}</td>
                              <td>${profile.order.paymentStatus.paid ? 'Y' : 'N'}</td>
                              <td>
                                <c:choose>
                                  <c:when test="${profile.serviceAdded}">已加</c:when>
                                  <c:otherwise>
                                    <a href="${ctx.host}/taste-stat-reports/${profile.id}/add-service" data-toggle="modal" data-target="#add-service" title="添加客服">添加</a>
                                  </c:otherwise>
                                </c:choose>
                              </td>
                            </tr>
                          </c:forEach>
                        </tbody>
                      </table>
                  </div>
                </div>
              </c:when>
              <c:otherwise>
                <div class="tab-pane fade active in"style="min-height: 100px;">
                  <h2 class="title">
                    <i class="glyphicon glyphicon-triangle-right" style="color: #FF8100;" title=""></i>&nbsp;&nbsp;<span>关键指标</span>
                  </h2>

                  <div style="margin: 0 15px;">
                    <div class="x-breadcrumb-content row key-data">
                      <div class="col-xs-4">
                        <h1>${questionNum}</h1>
                        <p>完成问卷数</p>
                      </div>
                      <div class="col-xs-4">
                        <h1>${profileNum}</h1>
                        <p>填写个人信息数</p>
                      </div>
                      <div class="col-xs-4">
                        <h1>${orderNum}</h1>
                        <p>下单量</p>
                      </div>
                    </div>
                  </div>

                  <h2 class="title">
                    <i class="glyphicon glyphicon-triangle-right" style="color: #FF8100;" title=""></i>&nbsp;&nbsp;<span>${empty selectedSource ? '全部来源' : selectedSource}</span>
                  </h2>

                  <div style="margin: 0 15px;">
                    <table class="table table-striped table-hover x-table" style="margin-bottom:20px;">
                      <thead>
                        <tr>
                          <th>日期</th>
                          <th>完成问卷数</th>
                          <th>填写个人信息数</th>
                          <th>下单量</th>
                        </tr>
                      </thead>
                      <tbody>
                        <c:forEach var="day" begin="1" end="${maxDay}" step="1">
                          <c:set var="strDay" value="${''}${day}"></c:set>
                          <c:set var="statDay" value="${yearMonth}-${day<10 ? '0': ''}${day}"></c:set>
                          <tr>
                            <td>${statDay}</td>
                            <c:choose>
                              <c:when test="${empty selectedSource}">
                                <td ${questionList[strDay].num > 0 ? 'style="color: red;"' : '' }>${empty questionList[strDay] ? 0 : questionList[strDay].num}</td>
                                <td ${profileList[strDay].num > 0 ? 'style="color: red;"' : '' }>${empty profileList[strDay] ? 0 : profileList[strDay].num}</td>
                                <td ${orderList[strDay].num > 0 ? 'style="color: red;"' : '' }>${empty orderList[strDay] ? 0 : orderList[strDay].num}</td>
                              </c:when>
                              <c:otherwise>
                                <c:choose>
                                  <c:when test="${empty tasteStatList[statDay]}">
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                  </c:when>
                                  <c:otherwise>
                                    <td ${tasteStatList[statDay].questionNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[statDay].questionNum}</td>
                                    <td ${tasteStatList[statDay].profileNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[statDay].profileNum}</td>
                                    <td ${tasteStatList[statDay].orderNum ne 0 ? 'style="color: red;"' : '' }>${tasteStatList[statDay].orderNum}</td>
                                  </c:otherwise>
                                </c:choose>
                              </c:otherwise>
                            </c:choose>
                            
                          </tr>
                        </c:forEach>
                      </tbody>
                    </table>
                  </div>
                </div>
              </c:otherwise>
            </c:choose>
            
          </div>
          
        </div>

      </div>

    </div>

  </div>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/report/taste-stat-report.js">
    <script type="text/javascript">
      require(['page/report/taste-stat-report'], function(page) {
        page.init({
          "day": '${param.day}',
          "period": '${param.period}',
          "today": '${today}',
          "source": '${param.source}'
        })
      })
    </script>
  </d:resource>
  
</body>
</html>